const OccupationTemplate = `
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>职业报考信息</span>
    </div>
    <div>
    <el-form ref="form" :disabled="isDisable" label-suffix=":" :model="formData" :rules="rules" label-width="117px" size="small">
      <el-row>
      <el-col :span="8">
        <el-form-item prop="professionalTypes" label="职业技能类别">
        <el-select v-model="formData.professionalTypes" placeholder="请选择" @change="handleProfessionChange">
          <el-option v-for="item in professionList" :key="item.id" :label="item.occupationName" :value="item.occupationName"></el-option>
        </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item  prop="majorName" label="报考专业">
        <el-select v-model="formData.majorName" placeholder="请选择">
          <el-option v-for="item in majorList" :key="item.id" :label="item.occupationInfoName" :value="item.occupationInfoName"></el-option>
        </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item  prop="batch" label="批次">
        <el-select v-model="formData.batch" placeholder="请选择">
          <el-option v-for="item in batchList" :key="item.id" :label="item.batch" :value="item.batch"></el-option>
        </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8">
        <el-form-item prop="applyExplain" label="报考说明">
        <el-input v-model="formData.applyExplain" placeholder="请输入报考说明"></el-input>
        </el-form-item>
      </el-col>
      </el-row>
    </el-form>
    </div>
  </el-card>
`;

Vue.component('app-occupation', {
  props: ['type'],
  name: 'app-occupation',
  template: OccupationTemplate,
  mounted() {
    this.getList();
    this.getBatchList();
  },
  data() {
    return {
      rules: {
        professionalTypes: [
          {
            required: true,
            message: '请选择职业技能类别',
            trigger: 'change',
          },
        ],
        majorName: [
          {
            required: true,
            message: '请选择报考专业',
          },
        ],
        batch: [
          {
            required: true,
            message: '请选择批次',
          },
        ],
        applyExplain: [
          {
            required: true,
            message: '请输入报考说明',
          },
        ],
      },
      professionList: [],
      majorList: [],
      batchList: [],
      formData: {
        professionalTypes: '',
        majorName: '',
        batch: '',
        applyExplain: '',
      },
    };
  },
  computed: {
    isDisable() {
      return this.type === 'look';
    },
  },
  methods: {
    handleProfessionChange(value) {
      const id = this.professionList.find(
        (item) => item.occupationName === value
      ).id;
      $.ajax({
        url: baseUrl + 'education/queryOccupationInfoList',
        method: 'Post',
        data: {
          occupationId: id,
        },
        success: (data) => {
          this.majorList = data;
        },
      });
    },
    getBatchList() {
      $.ajax({
        url: baseUrl + 'education/queryBatchList',
        method: 'Post',
        data: {
          trainType: 'occupation',
        },
        success: (data) => {
          this.batchList = data;
        },
      });
    },
    getList() {
      $.ajax({
        url: baseUrl + 'education/queryOccupationList',
        async: false,
        method: 'Post',
        headers: {
          Authorization: JSON.parse(localStorage.getItem('userInfo')).token,
        },
        success: (data) => {
          this.professionList = data;
        },
      });
    },
  },
});
